<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <h1>Object.defineProperty</h1>
    <p>什么是：数据代理，通过一个对象代理对另一个对象得属性操作（读 / 写）</p>
    <div id="root">
        <h2>view:</h2>
        <!-- 所有Vue有的属性，都能看见 -->
        <h2>{{viewModel}}</h2>
        <p>$options</p>
        <h2>{{$options}}</h2>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        // const vue = 
        console.log("new Vue: viewModel, const vm");
        // 
        const vm = new Vue({
            
          el: "#root",
        // data的函数式写法。
        // vm._data 有数据劫持。
        // 一旦data中得数据得到改变，页面数据便会更新。
        // _data 中得属性和vm中的对应属性进行数据代理，减少了_data得编写。
           data() {
               console.log(this) // vue
               return {
                viewModel:  " model"
               }
           }
        }); // vm
    </script>
</body>
</html>